<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body id="app">
    <div class="clickMe">
      <a href="#" @click="openPopup">点我</a>
    </div>
    <div v-if="isActive" class="overlay" @click.stop></div>
    <div v-if="isActive" class="popup">
      <h1>欢迎来到我的博客</h1>
      <p>
        欢迎来到我的博客，这里是我的学习和分享的地方。在这里，我将分享我的学习心得和经验，以及一些有趣的技术文章。
      </p>
      <a href="#">点击这里</a>
      <button @click="closePopup">&times</button>
    </div>
  </body>
</html>

<script>
  const { createApp } = Vue;
  const app = {
    data() {
      return {
        isActive: false,
      };
    },
    methods: {
      closePopup() {
        this.isActive = false;
        document.body.style.overflow = "";
        console.log("close");
      },
      openPopup() {
        this.isActive = true;
        document.body.style.overflow = "hidden";
        console.log("open");
      },
    },
  };

  createApp(app).mount("#app");
</script>
